import QtQuick 1.1
import com.meego 1.0
import "CommomUtil.js" as Util
import "Modulelib.js" as ModuleUtil
import "const.js" as Const

Item{
    id: container

    width: 480; height: container.itemType === "item" ? 133 : 51

    property string image: image

    property alias itemName: item_name.text

    property alias title: item_title_content.text

    property int itemNum: 0

    property string itemType: "item"

    property string backType: "mid"

    property string vehicleId: "0"

    Item{
        id: item_line
        width: parent.width; height: itemType !== "item" ? 0 : parent.height
        opacity: itemType !== "item" ? 0 : 1
        anchors.fill: parent


        BorderImage { // 背景图片
            id: item_back
            source: if(container.backType === "top") {"../images/modelslib/top.png" }else if(container.backType === "bottom"){"../images/modelslib/down.png"} else {"../images/modelslib/mid.png"}
            width: 451; height: 133
            anchors.centerIn: parent
        }

        Image {
            id: vehicle_image
            width: 120; height: 90
            anchors.left: item_back.left; anchors.leftMargin: 20
            anchors.top: item_back.top; anchors.topMargin: 21
            source: image === "" ? "../images/modelslib/top.png" : image
        }

        Rectangle{
            id: vehicle_desc_rect
            width: item_back.width - vehicle_image - 40; height: item_back.height
            anchors.left: vehicle_image.right; anchors.leftMargin: 40
            anchors.top: item_back.top;
            opacity: 0
        }

        Text { // 车型名称
            id: item_name
            color: "#000000"
            font{bold: true; pointSize: 22 }
            anchors.left: vehicle_desc_rect.left
            anchors.top: vehicle_desc_rect.top
            width: vehicle_desc_rect.width; height: 63
            verticalAlignment: Text.AlignBottom
            horizontalAlignment: Text.AlignLeft
        }

        Text { // 车型数量
            id: item_number
            text: container.itemNum + "款车型"
            color: "#7a7575"
            font{bold: true; pointSize: 16 }
            anchors.top: item_name.bottom; anchors.topMargin: 15
            anchors.left: vehicle_desc_rect.left
            width: vehicle_desc_rect.width; height: 60
            verticalAlignment: Text.AlignTop
            horizontalAlignment: Text.AlignLeft
        }

        MouseArea{
            id: itemMouseArea
            anchors.fill: parent
            onClicked: { // 转入车系详细页面
                ModuleUtil.current_vehicle_id = container.vehicleId;
                ModuleUtil.current_vehicle_name = container.itemName;
                mainPage.pageStack.push(Qt.resolvedUrl("ModuleDetailPage.qml"));
            }
        }

        states: [
            State {
                name: 'pressed'; when: itemMouseArea.pressed
                PropertyChanges { target: mouseAreaPressed; focus: true; opacity: 0.5}
            }
        ]

        Rectangle{
            id: mouseAreaPressed
            anchors.fill: parent
            color: "#000"
            opacity: 0
        }

    }

    Item{
        id: item_title
        width: parent.width; height: itemType === "item" ? 0 : parent.height
        opacity: itemType === "item" ? 0 : 1

        Rectangle{
            id: item_title_rect
            color: Const.Color.TitleColor
            width: 451; height: parent.height
            anchors.centerIn: parent
        }

        Text{
            id: item_title_content
            anchors.left:  parent.left; anchors.leftMargin: 45
            anchors.top: parent.top; anchors.topMargin: 12
            color: Const.Color.white
            font{bold: true; pointSize: 17; }
            horizontalAlignment: Text.AlignLeft
        }
    }
}
